<template>
    <div class="label-select">
        <div class="label-style">{{labelName}}:</div>
        <div class="select-style">
            <a-select :placeholder="placeholder" v-model="selectedValue" size="middle"
                :style="'width:' + selectWidth +'px'" :options="selectOptions" @change="handleChange" allowClear>
            </a-select>
            <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys"
                v-model:checkedKeys="checkedKeys" checkable :tree-data="treeData">
                <template #title="{ title, key }">
                    <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
                    <template v-else>{{ title }}</template>
                </template>
            </a-tree>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'labelTree'
}
</script>
<script lang="ts" setup>
import type { TreeProps } from 'ant-design-vue';
import { defineComponent, ref, watch } from 'vue';
interface Props {
    labelName?: string,
    selectedValue: {},
    selectOptions: any[],
    placeholder?: string,
    selectWidth: number,
}

const props = withDefaults(defineProps<Props>(), {
    labelName: '',
    selectedValue: undefined,
    placeholder: undefined,
    selectWidth: 150,
})

const selectedValue2 = ref<string>('');

console.log('默认绑定的值', props.selectedValue);
console.log('默认绑定的值', selectedValue2);
const emits = defineEmits(['selectedChangeFunc'])
// 需要传递的值
const handleChange = (value: string) => {
    console.log('子组件的值', value);
    emits('selectedChangeFunc', value);
}


const treeData: TreeProps['treeData'] = [
    {
        title: 'parent 1',
        key: '0-0',
        children: [
            {
                title: 'parent 1-0',
                key: '0-0-0',
                disabled: true,
                children: [
                    { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
                    { title: 'leaf', key: '0-0-0-1' },
                ],
            },
            {
                title: 'parent 1-1',
                key: '0-0-1',
                children: [{ key: '0-0-1-0', title: 'sss' }],
            },
        ],
    },
];

const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
watch(expandedKeys, () => {
    console.log('expandedKeys', expandedKeys);
});
watch(selectedKeys, () => {
    console.log('selectedKeys', selectedKeys);
});
watch(checkedKeys, () => {
    console.log('checkedKeys', checkedKeys);
});
</script>
<style lang="less" scoped>

</style>